
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        /* 标签选择器的使用 */
        /* div{
            color: red;
        }
        span{
            color: greenyellow;
        }
        a{
            color: blue ;
        } */
         /* id选择器的使用 */
         /* #div2{
            color: blueviolet;
         } */
         /* class选择器的使用 */
         /* .font40{
            color: red;
         } */
          /* 通配符选择器的使用 */
          /* *{
            color: rgb(142, 21, 21);
          } */
           /* 复合选择器的使用 */
           /* ① */
           /* #div1,#div2{
            color: red;
           } */
            /* ② */
            /* ol li{
                color: blueviolet;
            } */
             /* ③ */
             /* ul li{
                color: red;
             } */
              /* css样式的使用 */
              #div1{
                /* color: red; */
                width: 500px;
                height: 200px;
                /* border-width:1px 5px 10px 15px; */
                /* border-style:solid; */
                /* border-color:chartreuse rebeccapurple red ; */
                border: solid red 1px;
                display: inline;
              }
              #div4{
                width: 500px;
                height: 200px;
                border: solid red 1px;
                display: block;
              }
        



    </style>
</head>
<body>
    <div id="div1" class="font40">我是div1</div>
    <div id="div2" class="font40">我是div2</div>
    <div id="div3" class="font40"><a href="#" class="font40">我是div3</a></div>
    <span id="div4">我是spn</span>
    <!-- 无序列表的使用 -->
     <ul>
        <li>我是第一个</li>
        <li>我是第二个</li>
        <li>我是第三个</li>
     </ul>
     <!-- 有序列表的使用 -->
      <ol>
      <li>我是老大</li>
      <li>我是老二</li>
      <li>我是老三</li>
      </ol>
</body>
</html>